<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热门对联 - 联语轩</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#C41E3A',
                        secondary: '#1C1C1C',
                        'gray-light': '#F5F5F5',
                        'gray-medium': '#E0E0E0',
                        'gray-dark': '#8E8E93'
                    },
                    fontFamily: {
                        song: ['SimSun', 'serif'],
                        kai: ['KaiTi', 'STKaiti', 'serif']
                    },
                    boxShadow: {
                        'custom': '0 2px 8px rgba(0, 0, 0, 0.08)'
                    }
                }
            }
        }
    </script>
    <!-- 自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .category-text {
                background-color: rgba(196, 30, 58, 0.1);
                color: #C41E3A;
                padding: 1px 6px;
                border-radius: 3px;
            }
        }
    </style>
</head>
<body class="bg-gray-light min-h-screen pb-20">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-30 transition-all duration-300" id="top-nav">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <h1 class="text-xl font-bold text-primary">联语轩</h1>
            <div class="flex items-center space-x-4">
                <button class="text-gray-dark hover:text-primary transition-colors">
                    <i class="fa fa-search text-lg"></i>
                </button>
                <button class="text-gray-dark hover:text-primary transition-colors">
                    <i class="fa fa-bell text-lg"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-4">
        <!-- 页面标题 -->
        <div class="mb-6">
            <h2 class="text-xl font-bold text-secondary">热门对联</h2>
            <p class="text-sm text-gray-dark mt-1">发现最受欢迎的经典对联作品</p>
        </div>

        <!-- 分类导航 -->
        <div class="overflow-x-auto scrollbar-hide -mx-4 px-4 mb-6">
            <div class="flex space-x-4 pb-2" style="width: max-content;">
                <button class="category-btn px-4 py-2 bg-primary text-white rounded-full text-sm font-medium transition-all" data-category="all">
                    全部
                </button>
                <button class="category-btn px-4 py-2 bg-white text-gray-dark rounded-full text-sm font-medium transition-all hover:bg-gray-light" data-category="spring">
                    春联
                </button>
                <button class="category-btn px-4 py-2 bg-white text-gray-dark rounded-full text-sm font-medium transition-all hover:bg-gray-light" data-category="wedding">
                    喜联
                </button>
                <button class="category-btn px-4 py-2 bg-white text-gray-dark rounded-full text-sm font-medium transition-all hover:bg-gray-light" data-category="birthday">
                    寿联
                </button>
                <button class="category-btn px-4 py-2 bg-white text-gray-dark rounded-full text-sm font-medium transition-all hover:bg-gray-light" data-category="scenic">
                    名胜联
                </button>
                <button class="category-btn px-4 py-2 bg-white text-gray-dark rounded-full text-sm font-medium transition-all hover:bg-gray-light" data-category="funny">
                    趣味联
                </button>
            </div>
        </div>

        <!-- 对联列表容器 -->
        <div id="couplets-container" class="space-y-4">
            <!-- 对联内容将通过JavaScript动态填充 -->
        </div>

        <!-- 加载更多 -->
        <div class="text-center py-6">
            <button id="load-more-btn" class="px-6 py-2 border border-primary text-primary rounded-full text-sm font-medium transition-all hover:bg-primary hover:text-white">
                加载更多
            </button>
        </div>
    </main>

    <!-- 底部导航 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-1px_3px_rgba(0,0,0,0.1)] py-2 z-40">
        <div class="container mx-auto">
            <div class="flex justify-around">
                <a href="index.html" class="flex flex-col items-center text-primary">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="create.html" class="flex flex-col items-center text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-pencil text-lg"></i>
                    <span class="text-xs mt-1">创作</span>
                </a>
                <a href="profile.html" class="flex flex-col items-center text-gray-400 hover:text-primary transition-colors">
                    <i class="fa fa-user text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </div>
    </footer>

    <script>
        // 顶部导航栏滚动效果
        const topNav = document.getElementById('top-nav');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 10) {
                topNav.classList.add('shadow-md');
            } else {
                topNav.classList.remove('shadow-md');
            }
        });

        // 分类数据
        const coupletData = {
            all: [],
            spring: [
                {
                    id: 1,
                    category: '春联',
                   上联: '春风吹绿千枝柳',
                   下联: '时雨催红万树花',
                    likes: 1280,
                    bookmarked: false
                },
                {
                    id: 2,
                    category: '春联',
                   上联: '天增岁月人增寿',
                   下联: '春满乾坤福满门',
                    likes: 1150,
                    bookmarked: true
                },
                {
                    id: 3,
                    category: '春联',
                   上联: '爆竹声中一岁除',
                   下联: '春风送暖入屠苏',
                    likes: 980,
                    bookmarked: false
                },
                {
                    id: 4,
                    category: '春联',
                   上联: '和顺一门有百福',
                   下联: '平安二字值千金',
                    likes: 850,
                    bookmarked: false
                },
                {
                    id: 5,
                    category: '春联',
                   上联: '一帆风顺年年好',
                   下联: '万事如意步步高',
                    likes: 780,
                    bookmarked: false
                }
            ],
            wedding: [
                {
                    id: 6,
                    category: '喜联',
                   上联: '百年恩爱双心结',
                   下联: '千里姻缘一线牵',
                    likes: 1560,
                    bookmarked: true
                },
                {
                    id: 7,
                    category: '喜联',
                   上联: '红妆带绾同心结',
                   下联: '碧树花开并蒂莲',
                    likes: 1320,
                    bookmarked: false
                },
                {
                    id: 8,
                    category: '喜联',
                   上联: '一对璧人留小影',
                   下联: '无双国士缔良缘',
                    likes: 1050,
                    bookmarked: false
                },
                {
                    id: 9,
                    category: '喜联',
                   上联: '琴韵谱成同梦语',
                   下联: '灯花笑对含羞人',
                    likes: 920,
                    bookmarked: false
                }
            ],
            birthday: [
                {
                    id: 10,
                    category: '寿联',
                   上联: '福如东海长流水',
                   下联: '寿比南山不老松',
                    likes: 2100,
                    bookmarked: true
                },
                {
                    id: 11,
                    category: '寿联',
                   上联: '松苍柏翠千秋寿',
                   下联: '日暖风和百世昌',
                    likes: 1480,
                    bookmarked: false
                },
                {
                    id: 12,
                    category: '寿联',
                   上联: '人寿年丰福如海',
                   下联: '时和景丽春常驻',
                    likes: 1250,
                    bookmarked: false
                }
            ],
            scenic: [
                {
                    id: 13,
                    category: '名胜联',
                   上联: '风声雨声读书声，声声入耳',
                   下联: '家事国事天下事，事事关心',
                    likes: 2800,
                    bookmarked: true
                },
                {
                    id: 14,
                    category: '名胜联',
                   上联: '海水朝朝朝朝朝朝朝落',
                   下联: '浮云长长长长长长长消',
                    likes: 2350,
                    bookmarked: false
                },
                {
                    id: 15,
                    category: '名胜联',
                   上联: '爽气西来，云雾扫开天地憾',
                   下联: '大江东去，波涛洗净古今愁',
                    likes: 1890,
                    bookmarked: false
                },
                {
                    id: 16,
                    category: '名胜联',
                   上联: '青山有幸埋忠骨',
                   下联: '白铁无辜铸佞臣',
                    likes: 1750,
                    bookmarked: false
                }
            ],
            funny: [
                {
                    id: 17,
                    category: '趣味联',
                   上联: '上海自来水来自海上',
                   下联: '黄山落叶松叶落山黄',
                    likes: 1680,
                    bookmarked: false
                },
                {
                    id: 18,
                    category: '趣味联',
                   上联: '南通州北通州南北通州通南北',
                   下联: '东当铺西当铺东西当铺当东西',
                    likes: 1540,
                    bookmarked: true
                },
                {
                    id: 19,
                    category: '趣味联',
                   上联: '水车车水，水随车，车停水止',
                   下联: '风扇扇风，风出扇，扇动风生',
                    likes: 1420,
                    bookmarked: false
                },
                {
                    id: 20,
                    category: '趣味联',
                   上联: '画上荷花和尚画',
                   下联: '书临汉帖翰林书',
                    likes: 1380,
                    bookmarked: false
                }
            ]
        };

        // 合并所有对联数据到all类别
        coupletData.all = [].concat(
            coupletData.spring,
            coupletData.wedding,
            coupletData.birthday,
            coupletData.scenic,
            coupletData.funny
        ).sort((a, b) => b.likes - a.likes);

        // 当前加载的分类和页码
        let currentCategory = 'all';
        let currentPage = 1;
        const itemsPerPage = 10;

        /**
         * 渲染对联列表
         * @param {string} category - 对联分类
         * @param {boolean} append - 是否追加到现有列表
         * @param {number} page - 当前页码
         */
        function renderCouplets(category, append = false, page = 1) {
            const container = document.getElementById('couplets-container');
            const couplets = coupletData[category];
            
            // 计算当前页显示的数据
            const startIndex = (page - 1) * itemsPerPage;
            const endIndex = startIndex + itemsPerPage;
            const pageCouplets = couplets.slice(startIndex, endIndex);
            
            // 如果不是追加模式，则清空容器
            if (!append) {
                container.innerHTML = '';
                container.style.opacity = '0';
                currentPage = 1;
            }

            // 生成对联HTML并添加到容器
            const coupletHTML = pageCouplets.map(couplet => `
                <div class="bg-white rounded-xl shadow-sm p-4 transition-all hover:shadow-md">
                    <div class="font-kai text-center py-3">
                        <p class="text-lg mb-2">${couplet.上联}</p>
                        <p class="text-lg mb-3">${couplet.下联}</p>
                    </div>
                    <div class="flex justify-between items-center pt-2 border-t border-gray-medium">
                        <span class="text-xs category-text">${couplet.category}</span>
                        <div class="flex space-x-4">
                            <button class="like-btn flex items-center text-gray-dark hover:text-primary transition-colors" data-id="${couplet.id}">
                                <i class="fa fa-thumbs-o-up mr-1"></i>
                                <span class="text-xs">${couplet.likes}</span>
                            </button>
                            <button class="bookmark-btn flex items-center transition-colors ${couplet.bookmarked ? 'text-primary' : 'text-gray-dark'}" data-id="${couplet.id}">
                                <i class="fa fa-bookmark-o mr-1"></i>
                                <span class="text-xs">收藏</span>
                            </button>
                        </div>
                    </div>
                </div>
            `).join('');

            if (append) {
                // 追加模式直接添加
                container.insertAdjacentHTML('beforeend', coupletHTML);
            } else {
                // 替换模式添加后执行淡入动画
                setTimeout(() => {
                    container.innerHTML = coupletHTML;
                    container.style.transition = 'opacity 0.3s ease-in-out';
                    container.style.opacity = '1';
                }, 10);
            }

            // 注册收藏和点赞事件
            registerBookmarkEvents();
            registerLikeEvents();

            // 更新加载更多按钮状态
            updateLoadMoreButton(category, endIndex);
        }

        /**
         * 更新加载更多按钮状态
         * @param {string} category - 当前分类
         * @param {number} endIndex - 当前加载到的索引
         */
        function updateLoadMoreButton(category, endIndex) {
            const loadMoreBtn = document.getElementById('load-more-btn');
            const totalItems = coupletData[category].length;
            
            if (endIndex >= totalItems) {
                loadMoreBtn.disabled = true;
                loadMoreBtn.textContent = '没有更多了';
                loadMoreBtn.classList.add('opacity-50', 'cursor-not-allowed');
            } else {
                loadMoreBtn.disabled = false;
                loadMoreBtn.textContent = '加载更多';
                loadMoreBtn.classList.remove('opacity-50', 'cursor-not-allowed');
            }
        }

        /**
         * 注册收藏按钮事件
         */
        function registerBookmarkEvents() {
            const bookmarkBtns = document.querySelectorAll('.bookmark-btn');
            bookmarkBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const id = parseInt(this.dataset.id);
                    let found = false;
                    
                    // 在所有分类中查找并更新收藏状态
                    Object.keys(coupletData).forEach(category => {
                        const couplet = coupletData[category].find(c => c.id === id);
                        if (couplet) {
                            couplet.bookmarked = !couplet.bookmarked;
                            found = true;
                        }
                    });
                    
                    // 更新按钮样式
                    if (found) {
                        if (this.classList.contains('text-primary')) {
                            this.classList.remove('text-primary');
                            this.classList.add('text-gray-dark');
                            alert('已取消收藏');
                        } else {
                            this.classList.remove('text-gray-dark');
                            this.classList.add('text-primary');
                            alert('已添加收藏');
                        }
                    }
                });
            });
        }

        /**
         * 注册点赞按钮事件
         */
        function registerLikeEvents() {
            const likeBtns = document.querySelectorAll('.like-btn');
            likeBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const id = parseInt(this.dataset.id);
                    let found = false;
                    let likesElement = null;
                    let currentLikes = 0;
                    
                    // 在所有分类中查找并更新点赞数
                    Object.keys(coupletData).forEach(category => {
                        const couplet = coupletData[category].find(c => c.id === id);
                        if (couplet) {
                            couplet.likes += 1;
                            found = true;
                        }
                    });
                    
                    // 更新显示的点赞数
                    if (found) {
                        likesElement = this.querySelector('span');
                        currentLikes = parseInt(likesElement.textContent);
                        likesElement.textContent = currentLikes + 1;
                        
                        // 添加点赞动画效果
                        this.classList.add('text-primary');
                        setTimeout(() => {
                            this.classList.remove('text-primary');
                        }, 200);
                    }
                });
            });
        }

        /**
         * 初始化分类切换功能
         */
        function initCategorySwitch() {
            const categoryBtns = document.querySelectorAll('.category-btn');
            
            categoryBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 移除所有按钮的选中状态
                    categoryBtns.forEach(b => {
                        b.classList.remove('bg-primary', 'text-white');
                        b.classList.add('bg-white', 'text-gray-dark', 'hover:bg-gray-light');
                    });
                    
                    // 添加当前按钮的选中状态
                    this.classList.remove('bg-white', 'text-gray-dark', 'hover:bg-gray-light');
                    this.classList.add('bg-primary', 'text-white');
                    
                    // 获取分类并渲染对应内容
                    currentCategory = this.dataset.category;
                    renderCouplets(currentCategory);
                });
            });
        }

        /**
         * 初始化加载更多功能
         */
        function initLoadMore() {
            const loadMoreBtn = document.getElementById('load-more-btn');
            
            loadMoreBtn.addEventListener('click', function() {
                if (!this.disabled) {
                    currentPage += 1;
                    renderCouplets(currentCategory, true, currentPage);
                }
            });
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化分类切换
            initCategorySwitch();
            
            // 初始化加载更多
            initLoadMore();
            
            // 默认显示全部对联
            renderCouplets('all');
        });
    </script>
</body>
</html>